<template>
    <div>
        <h3>里程碑分析</h3>
        <p class="count-down">倒计时：222天</p>
        <div class="content">
            <div class="table-block">
                <el-table :cell-style="getCellStyle" border :row-style="getRowStyle" :header-cell-style="getRowClass" :data="table_data" :span-method="objectSpanMethod">
                    <el-table-column label="序号" type="index" width="50">
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="楼栋/分区" property="building" width="160"></el-table-column>
                    <el-table-column label="关键节点名称" property="name"></el-table-column>
                    <el-table-column label="计划完成日期" property="finishdate"></el-table-column>
                    <el-table-column label="系统预估完成日期" property="targetdate"></el-table-column>
                    <el-table-column label="预估提醒" property="status"></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "schedule-table",
    data() {
        return {
            table_data: [
                {
                    building: "5#",
                    name: "6层主体施工完成",
                    finishdate: "2018年11月10日",
                    targetdate: "2018年11月12日",
                    status: "滞后2天"
                },
                {
                    building: "5#",
                    name: "7层主体施工完成",
                    finishdate: "2018年11月10日",
                    targetdate: "2018年11月14日",
                    status: "滞后4天"
                },
                {
                    building: "5#",
                    name: "8层主体施工完成",
                    finishdate: "2018年11月10日",
                    targetdate: "2018年11月10日",
                    status: "正常"
                },
                {
                    building: "6#",
                    name: "9层主体施工完成",
                    finishdate: "2018年11月10日",
                    targetdate: "2018年11月10日",
                    status: "正常"
                },
                {
                    building: "6#",
                    name: "20层主体施工完成",
                    finishdate: "2018年11月10日",
                    targetdate: "2018年11月10日",
                    status: "正常"
                },
                {
                    building: "6#",
                    name: "6层主体施工完成",
                    finishdate: "2018年11月10日",
                    targetdate: "2018年11月10日",
                    status: "正常"
                },
                {
                    building: "6#",
                    name: "7层主体施工完成",
                    finishdate: "2018年11月10日",
                    targetdate: "2018年11月10日",
                    status: "正常"
                },
                {
                    building: "7#",
                    name: "8层主体施工完成",
                    finishdate: "2018年11月10日",
                    targetdate: "2018年11月10日",
                    status: "正常"
                },
                {
                    building: "7#",
                    name: "9层主体施工完成",
                    finishdate: "2018年11月10日",
                    targetdate: "2018年11月10日",
                    status: "正常"
                },
                {
                    building: "7#",
                    name: "20层主体施工完成",
                    finishdate: "2018年11月10日",
                    targetdate: "2018年11月10日",
                    status: "正常"
                },
                {
                    building: "7#",
                    name: "20层主体施工完成",
                    finishdate: "2018年11月10日",
                    targetdate: "2018年11月10日",
                    status: "正常"
                },
                {
                    building: "7#",
                    name: "20层主体施工完成",
                    finishdate: "2018年11月10日",
                    targetdate: "2018年11月10日",
                    status: "正常"
                }
            ]
        };
    },
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 1) {
                if (rowIndex === 0) {
                    return {
                        rowspan: 3,
                        colspan: 1
                    }
                } else if (rowIndex === 3) {
                    return {
                        rowspan: 4, 
                        colspan: 1
                    }
                } else if (rowIndex === 7){
                    return {
                        rowspan: 5, 
                        colspan: 1
                    }
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    }
                } 
            }
        },
        getRowClass({ row, column, rowIndex, colIndex }) {
            if (rowIndex === 0) {
                return "background:#f5f7f9;text-align: center";
            }
        },
        getRowStyle({row, rowIndex}) {
            if (row.status.includes('滞后')) {
                return "color:red"
            }
        },
        getCellStyle({row, rowIndex}) {
            return "text-align: center"
        }
    }
};
</script>

<style scoped>
@import "../../assets/css/data.css";
.count-down {
    float: right;
    font-size: 16px;
    font-weight: 600;
    margin-right: 32px;
}
</style>
